<template>
  <div>
    <!-- <div v-show="isLoading">加载中</div> -->
    <!-- <img src="./assets/logo.png"> -->
    <hd-header :title="title" v-if="headers" :go="gonum"/>
    <!-- <div style="margin-top:1rem;margin-bottom:30px" v-if="headers">
      <transition :name="transitionName">
        <router-view>{{pageLoading}}{{ajaxLoading}}</router-view>
      </transition>
    </div> -->
    <!-- 如果是微信浏览器 -->
    <div v-bind:style="styleObject">  
      <transition :name="transitionName">
        <router-view>{{pageLoading}}{{ajaxLoading}}</router-view>
      </transition>
    </div>
    <hd-footer v-if="footers"/>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      gonum: -1,
      transitionName: 'slide-left',
      title: '', // 头部标题
      headers: true, // 默认显示头部信息
      footers: true, // 默认显示尾部信息
      iswx: true, // 默认认为是微信浏览器
      styleObject: {
        'margin-top': '1rem',
        'margin-bottom': '30px'
      }
    }
  },
  created: function() {
    // 判断浏览器类型 打开方式是否是微信浏览器方式打开
    var ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      this.iswx = true;
      this.headers = false;
      this.footers = false;
      this.styleObject = {
        'margin-top': '0px',
        'margin-bottom': '0.1rem'
      };
      // alert('正在使用微信浏览器打开')
    } else {
      this.iswx = false;
      this.headers = true;
      this.footers = true;
      // alert('正在使用其他浏览器打开' + ua + ' --- ' + ua.match(/MicroMessenger/i))
    }
  },
  computed: {
    pageLoading() {
      if (this.$store.state.pageLoading) {
        this.$dialog.loading.open('页面加载中...')
      } else {
        // setTimeout(() => {
        this.$dialog.loading.close()
        // }, 2000);
      }
      return this.$store.state.pageLoading
    },
    ajaxLoading() {
      if (this.$store.state.ajaxLoading) {
        this.$dialog.loading.open('请求加载中...')
      } else {
        this.$dialog.loading.close()
      }
      return this.$store.state.ajaxLoading
    }
  },
  watch: {
    '$route' (to, from) {
      // 如果不是微信浏览器打开,显示头部信息
      if (this.iswx === false) {
        // 设置通用头部
        this.title = to.name
        // this.header = to.meta.header
        // this.footer = to.meta.footer
        this.headers = true
        this.footers = true
      } else {
        this.title = to.name
        this.headers = false
        this.footers = false
      }
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
  }
}
</script>

<style>
body {
  font-family: 'Helvetica Neue',Tahoma,Arial,PingFangSC-Regular,'Hiragino Sans GB','Microsoft Yahei',sans-serif;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: none;
  background-color: #ffffff;
}
/* 阿里妈妈iconfont 设置 */
.icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em; height: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: #000000;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
  overflow: hidden;
}
</style>
